<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="materialIdVisibletabs"
    :before-close="handleClose"
    top="5vh"
    append-to-body
    width="70%"
  >
    <template slot="title">
      <div :style="titleColor">搜索</div>
    </template>
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="客户名称">
        <el-select
          v-model="listQuery.fsiteNo"
          clearable
          filterable
          placeholder="请选择客户名称"
        >
          <el-option
            v-for="item in fsiteNoBelongOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="样品名称">
        <el-input
          v-model.trim="listQuery.fsamplename"
          clearable
          class="filter-item"
          placeholder="请输入样品名称"
        />
      </el-form-item>
      <el-form-item label="样品分类">
        <el-select
          v-model="listQuery.fclassstno"
          clearable
          filterable
          placeholder="请选择样品分类"
        >
          <el-option
            v-for="item in catlist"
            :key="item.fclassstno"
            :label="item.fclassstname"
            :value="item.fclassstno"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          round
          size="medium"
          class="filter-item"
          :style="{ background: buttonColor.lookup, color: buttonColor.color }"
          @click="searchFilteruse"
          >查找</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="searchList"
      :header-cell-style="tableColor"
      element-loading-text="正在查询中。。。"
      height="300"
    >
      <el-table-column align="center" width="80" label="序号" type="index" />
      <el-table-column align="left" label="样品编号" prop="fclassstno" />
      <el-table-column
        align="left"
        width="200"
        label="样品名称"
        prop="fsamplename"
      />
      <el-table-column
        align="left"
        width="200"
        label="样品条码"
        prop="fbarcode"
      />
      <el-table-column
        align="left"
        label="样品分类"
        prop="fclassstno"
      />
      <el-table-column align="left" label="型号" prop="fspec" />
      <el-table-column align="center" label="选择" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            type="primary"
            round
            size="small"
            class="button-margin"
            :style="{
              background: buttonColor.confirm,
              color: buttonColor.color,
            }"
            @click="searchDatause(scope.row)"
            >确定</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      style="padding: 14px 10px !important"
      @pagination="getSearchListuse"
    />
  </el-dialog>
</template>
  
  <script>
import { list } from "@/api/sample/cat";
import { fsiteOptionsByLevel } from "@/api/area";
import { sampleInfolist } from "@/api/sample/detail";
import { titleColor, buttonColor, tableColor } from "@/filters/index";
import Pagination from "@/components/Pagination";
export default {
  name: "Material",
  components: { Pagination },
  data() {
    return {
      titleColor,
      buttonColor,
      tableColor,
      catlist: [],
      fsiteNoBelongOptions: [],
      searchList: [],
      listLoading: false,
      materialIdVisibletabs:false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fclassstno: undefined,
        fsamplename: undefined,
      },
    };
  },
  created() {
    this.getSearchListuse();
    this.getcatlist();
    this.getcustom();
  },
  methods: {
    open(){
      this.materialIdVisibletabs=true;
    },
    //分类
    getcatlist() {
      list(this.listQuery).then((res) => {
        this.catlist = res.data.data.list;
      });
    },
    //列表
    getSearchListuse() {
      sampleInfolist(this.listQuery).then((response ) => {
        this.searchList = response.data.data.list;
        this.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    //客户列表
    getcustom() {
      fsiteOptionsByLevel(3)
        .then((response) => {
          this.fsiteNoBelongOptions = response.data.data.list;
        })
        .catch(() => {
          this.fsiteNoBelongOptions = [];
        });
    },

    // 存储分类
    formatfsupno: function (row, column) {
      if (this.catlist.length > 0) {
        for (let i = 0; i < this.catlist.length; i++) {
          if (row.fclassstno === this.catlist[i].fclassstno) {
            return this.catlist[i].fclassstname;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    searchFilteruse() {
      this.listQuery.page = 1;
      this.getSearchListuse();
    },

    // 物料选择
    searchDatause(row) {
       this.materialIdVisibletabs=false;
      // 向父组件返回数据
      this.$emit("materialDialog", { data: row });
    },

    // 弹窗点击关闭前的回调
    handleClose() {
      this.materialIdVisibletabs=false;
    },
  },
};
</script>
  